const React = require('react');
import {Link} from 'react-router';
const $=require('jquery');

var page = React.createClass({
     getInitialState:function(){
        return{
            bookid:0,
            bookname:'',
            bookauthor:'',
            bookdesc:'',
            chapterid:0,
            chapterList:[],
            isReverse:false
        }
    },
    componentWillMount:function(){   
        window.scrollTo(0,0);
        let bookid=this.props.params.bookid;
        this.setState({
            bookid:bookid
        })
        this.getData();  
    },
    componentDidMount :function(){  
           
    },
    getData:function(){
        let postData={
            bid:this.state.bookid
        };
        $.ajax({
            type: "POST",
            url: "http://localhost:3125/ApiBook/GetChapterList",
            dataType: "json",
            data: postData,
            success: function (result) {           
                this.setState({
                    bookid:result.bookId,
                    bookname:result.bookName,
                    bookauthor:result.bookAuthor,
                    bookdesc:result.bookDesc,                    
                    chapterList:result.chapters
                });
            }.bind(this)
        });
    },
    changeSort:function(){
        var chapters=this.state.chapterList;
        chapters=chapters.reverse();
        this.setState({
            chapterList:chapters,
            isReverse:!this.state.isReverse
        });
    },
    render: function () {
        let btnSort=<i className="am-icon-long-arrow-down">倒叙</i>;
        if(this.state.isReverse)
        {
            btnSort=<i className="am-icon-long-arrow-up">顺叙</i>
        }
        return (       
                <div className="chapter">
                    <div className="listHeader am-text-center">
                        <h1>{this.state.bookname}</h1><span>作者：{this.state.bookauthor}</span>    
                        <a onClick={this.changeSort} className="am-margin-left am-btn am-btn-secondary am-btn-xs">
                            {btnSort}                        
                        </a>                   
                    </div>                    
                    <div className="listBox">                        
                        <div className="am-g am-text-sm chapterItem">
                            {
                                this.state.chapterList.map(function(item,index){
                                    return(
                                        <Link className="am-u-sm-12 am-u-md-4 am-u-end" to={"/chapter/"+item.BookId+"/"+item.Id} key={'lkey'+index} >
                                            {item.ChapterName}
                                        </Link>
                                    )
                                })
                            }                            
                        </div>
                    </div>
                </div>
        );
      }
});

module.exports = page;


